<template>
  <PageContainer>
    <view>
      <Header v-model="headerHeight" title="知识库" transparent="always" />
      <TmTabs
        v-model:active-name="activeTab"
        :list="tabsList"
        :item-width="itemWidth"
        :width="windowWidth"
        :default-name="activeTab"
        transparent
        :item-font-size="28"
        tabs-line-ani-color="primary"
        active-font-color="#333"
        un-selected-color="#969799"
        show-tabs-line-ani
        :show-tabs-line="false"
        :tabs-line-width="60"
      ></TmTabs>
      <swiper
        class="hb-flex-1 hb-w-full hb-relative"
        :style="{ height: contentHeight + 'px' }"
        :current="activeTab"
        @change="onSwiperChange"
      >
        <swiper-item v-for="(tab, index) in tabsList" :key="index">
          <view class="hb-p-4" :style="{ height: contentHeight + 'px' }">
            <view class="hb-bg-white hb-p-4 hb-h-full hb-box-shadow-base hb-rounded-xl hb-relative">
              <FileResource v-if="index === 0" />
              <BusinessCardResource v-else-if="index === 1" />
              <SharedResource v-else-if="index === 2" />
              <MemberResource v-else-if="index === 3" />
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* knowledgeBase 知识库 */
  import FileResource from './components/FileResource.vue';
  import BusinessCardResource from './components/BusinessCardResource.vue';
  import SharedResource from './components/SharedResource.vue';
  import MemberResource from './components/MemberResource.vue';
  import { useUserStore } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';

  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);

  // 使用计算属性构建tabsList，以确保响应式
  const tabsList = computed(() => {
    const tabs = [
      { key: 0, title: '文件资料' },
      { key: 1, title: '名片资料' },
      { key: 2, title: '共享资料' },
    ];

    // 只有在 botType 为 SAAS 时才显示会员资料选项卡
    if (userInfo.value?.aiUserAccountBotVo?.botType === 'SAAS') {
      tabs.push({ key: 3, title: '会员资料' });
    }

    return tabs;
  });

  const windowWidth = computed(() => {
    const w = uni.getWindowInfo().windowWidth;
    return w / (uni.upx2px(100) / 100);
  });

  const itemWidth = computed(() => {
    return windowWidth.value / tabsList.value.length;
  });

  // 当前激活的标签页
  const activeTab = ref(0);

  // Header高度
  const headerHeight = ref(44);

  // 计算内容高度（动态计算）
  const contentHeight = computed(() => {
    const { windowHeight } = uni.getWindowInfo();
    const tabsHeight = uni.upx2px(100); // TmTabs高度100rpx
    return windowHeight - headerHeight.value - tabsHeight;
  });

  // 仅处理swiper滑动
  function onSwiperChange(e: { detail: { current: number } }) {
    activeTab.value = e.detail.current;
  }
</script>

<style lang="scss" scoped></style>
